<template>
  <div>
    <!--面包屑导航区-->
    <my-bread level1="商品管理" level2="商品分类"></my-bread>
    <el-card>
      <el-row>
          <el-col>
              <el-button type="success" @click="addGoodsCate()">添加分类</el-button>
          </el-col>
      </el-row>
      <!--表格-->
      <el-table :data="categoriesList" style="width: 100%">
        <!--<el-table-column label="分类名称" prop="cat_name"></el-table-column>-->
        <!--
        treeKey 节点唯一标识 相当于nodeKey
        parentKey 父节点属性
        levelKey  等级
        childKey 子节点
        treeKey等属性值的来源el-table :data="categoriesList"
        -->
        <el-tree-grid
         prop="cat_name"
         label="分类名称"
         treeKey="cat_id"
         parentKey="cat_pid"
         levelKey="cat_level"
         childKey="children">
        </el-tree-grid>
        <el-table-column label="级别">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.cat_level === 0" type="success">一级</el-tag>
                <el-tag v-else-if="scope.row.cat_level === 1" type="warning">二级</el-tag>
                <el-tag v-else type="danger">三级</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="是否有效" prop="cat_deleted">
            <template slot-scope="scope">
                <div v-if="scope.row.cat_deleted === false">有效</div>
                <div v-else type="danger">无效</div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
            </template>
        </el-table-column>
      </el-table>
      <!--分页区-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 4, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!--添加分类对话框-->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible">
      <el-form :model="form" label-width="70px">
        <el-form-item label="分类名称">
            <el-input v-model="form.cat_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类">
            <!--级联选择器-->
            <el-cascader
            :options="cateList"
            v-model="selectedOptions"
            :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children' }"
            @change="handleChange" clearable></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// npm install element-tree-grid --save  element表格单元格-树形增强
let ElTreeGrid = require('element-tree-grid')
export default {
  components: {
    ElTreeGrid // 局部注册使用
  },
  data() {
    return {
      // 商品分类 - 三级分类数据列表
      categoriesList: [],
      queryInfo: {
        pagenum: 1,
        pagesize: 4
      },
      total: 0,
      // 控制添加分类对话框的显示与隐藏
      addCateDialogVisible: false,
      // 商品分类 - 二级分类数据列表
      cateList: [],
      form: {
        cat_pid: -1,
        cat_name: '',
        cat_level: -1
      },
      selectedOptions: []
    }
  },
  created() {
    this.getGoodsCate()
  },
  methods: {
    // 获取所有分类
    async getGoodsCate() {
      const { data: res } = await this.$http.get(`categories?type=3`, { params: this.queryInfo })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取商品分类数据列表失败')
      this.categoriesList = res.data.result
      this.total = res.data.total
    },
    // 监听pagesize改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getGoodsCate()
    },
    // 监听页码值改变
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getGoodsCate()
    },
    // 添加分类 - 显示对话框
    async addGoodsCate() {
      // 获取二级分类数据
      const { data: res } = await this.$http.get('categories?type=2')
      if (res.meta.status !== 200) return this.$message.error('获取商品二级分类数据列表失败')
      // console.log(res)
      this.cateList = res.data

      this.addCateDialogVisible = true
    },
    // 添加分类 - 发送请求
    async addCate() {
      // | cat_name  | 分类名称  | 不能为空                                                    |
      // | cat_pid   | 分类父 ID | 不能为空，如果要添加1级分类，则父分类Id应该设置为  `0`      |
      // | cat_level | 分类层级  | 不能为空，`0`表示一级分类；`1`表示二级分类；`2`表示三级分类 |
      // 只能添加三级分类
      // 一级分类 selectedOptions.length === 0 cat_pid=0 cat_level=0
      // 二级分类 selectedOptions.length === 1 cat_pid=selectedOptions[0] cat_level=1
      // 三级分类 selectedOptions.length === 2 cat_pid=selectedOptions[1] cat_level=2
      if (this.selectedOptions.length === 0) {
        this.form.cat_pid = 0
        this.form.cat_level = 0
      } else if (this.selectedOptions.length === 1) {
        this.form.cat_pid = this.selectedOptions[0]
        this.form.cat_level = 1
      } else if (this.selectedOptions.length === 2) {
        this.form.cat_pid = this.selectedOptions[1]
        this.form.cat_level = 2
      }
      const { data: res } = await this.$http.post('categories', this.form)
      console.log(res)
      if (res.meta.status !== 201) return this.$message.error('创建分类失败')
      // 清空表单
      this.form = {}
      // 关闭对话框
      this.addCateDialogVisible = false
      // 更新视图
      this.getGoodsCate()
    },
    // 级联选择器绑定的change事件
    handleChange() {}
  }
}
</script>

<style lang="less" scoped>

</style>
